<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>注册</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";margin: 0;padding: 0;}
        img{width: 100%;display: block;}
        input{border: 2px #cad0d7 solid;}
    </style>
    <link rel="stylesheet" type="text/css" href="css/register.css"th:href="@{css/register.css}">
    <link rel="stylesheet" th:href="@{/css/iziToast.min.css}">
</head>
<body>
<form th:action="@{/save}" method="post" id="submit">
    <div class="box">
        <div class="box_row">
            <div class="box_main">
                <div class="box_right_row">
                    <h1 class="title">注册</h1>
                    <div class="login_user">
                        <div class="login_img">
                            <img th:src="@{img/user.png}">
                        </div>
                        <input type="text" name="username" id="user" placeholder='用户名' maxlength="10">
                    </div>
                    <div class="login_password">
                        <div class="login_img">
                            <img th:src="@{img/lock.png}">
                        </div>
                        <img th:src="@{img/eyes_close.png}" id='eyes' onclick="changeEyes()">
                        <input type="password" name="password" id="password" placeholder='密码' maxlength="16">
                    </div>
                    <div class="confirm_password">
                        <div class="login_img">
                            <img th:src="@{img/confirm.png}" >
                        </div>
                        <img th:src="@{img/eyes_close.png}" id='confirm_eyes' onclick="changeconfirm()">
                        <input type="password" name="password1" id="confirm_password" placeholder='确认密码' maxlength="16">
                    </div>
                    <div class="mailbox">
                        <div class="login_img">
                            <img th:src="@{img/mailbox.png}" >
                        </div>
                        <input type="text" name="qqemail" id="mailbox" placeholder='输入邮箱' required pattern="^[a-z0-9]+[a-z0-9]*@([q]+[q]*[a-z0-9]+.){1,63}[a-z0-9]+$" title="请输入正确的邮箱格式">
                    </div>
                    <div class="Verification_Code">
                        <div class="login_img">
                            <img th:src="@{img/Verification_Code.png}">
                        </div>
                        <input type="button" value="获取邮箱验证码" id="getVerification" onclick="getCode()">
                        <input type="text" name="Verification_Code" id="Verification_Code" maxlength="6">
                        <input type="text" name="code" id="code" hidden="hidden">
                    </div>
                    <input type="submit" class="login" value="确定注册">
                    <a th:href="@{/}" class="login">返回登录</a>
                </div>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript" th:src="@{/js/index.js}"></script>
<script th:src="@{/js/jquery-1.8.2.min.js}"></script>
<script th:src="@{/js/supersized.3.2.7.min.js}"></script>
<script th:src="@{/js/supersized-init.js}"></script>
<script th:src="@{/js/iziToast.min.js}" ></script>

<script th:inline="javascript">
    $("#getVerification").click(function () {   //getVerification是获取button事件 调用ajax函数
        $.ajax({
            url:"/email",//这里直接通过get方法访问eamilservice里的发送邮件的方法
            type:"get",
            data:{"qqemail":$("#mailbox").val()},//qqemail是传给eamilservice的值 mailbox是获取前台的值
            success:function (code) {
                code = $("#code").val(code)
            }
        })
    })

    $(".login").click(function () {
        let user_code = $("#Verification_Code").val();
        var code = $("#code").val();
        if (user_code != code) {
            iziToast.error({
                position: 'topRight',
                color:'red',
                title: '操作失败，验证码错误',
                message: 'Error!',
            });
        }else{
            iziToast.success({
                position: 'topRight',
                title: '操作成功',
                message: 'Successfull!',
            });
            setTimeout(function(){
                $("#submit").submit();
            },3000);
        }

    })



</script>
</body>
</html>